<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('工作进度')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h3 class="label label-default">未办结</h3>     <h3 class="label label-primary">已办结</h3>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-3 b-r" th:each="label:${@dict.getType('eb_project_stage')}">
                            <h4 class="headFont" th:text="${label.dictLabel}"></h4>
                            <div th:if="${projectItem.stageItem.stageId} == ${label.dictValue}"
                            th:each="projectItem : ${projectItems}" >
                                <div class="alert btn-default" data-toggle="tooltip" data-placement="left"
                                     th:text="${projectItem.stageItem.itemName}"
                                     th:switch="${projectItem.projectItemStatus}" th:case="10">
                                </div>
                                <div class="alert btn-primary" data-toggle="tooltip" data-placement="left"
                                     th:text="${projectItem.stageItem.itemName}"
                                     th:switch="${projectItem.projectItemStatus}" th:case="40">
                                </div>
                                <ul class="sortable-list connectList agile-list" th:if="${projectItem.projectItemStatus} == 40">
                                    <li th:each="file : ${projectItem.fileList}" th:if="${file.oriFileName != null and !#strings.endsWith(file.oriFileName, 'pdf')}" th:onclick="showFiles([[${file.fileName}]], [[${file.oriFileName}]], [[${file.filePath}]]);">
                                        <img th:src="${file.filePath}" style="max-width: 100%;clear: both;display: block;margin: auto" id="imgElement" />
                                    </li>
                                    <li th:each="file : ${projectItem.fileList}" th:if="${file.oriFileName != null and #strings.endsWith(file.oriFileName, 'pdf')}" th:onclick="showFiles([[${file.fileName}]], [[${file.oriFileName}]], [[${file.filePath}]]);">
                                        <iframe th:src="${'/js/plugins/pdfjs-2.7.570-es5-dist/web/viewer.html?file=' + file.filePath}" width="100%" height="300px" style="border: none;width:100%;height:100%;" name="pdfContainer"></iframe>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<th:block th:include="include :: footer" />
<script type="application/javascript">
    function IEVersion() {
        let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
        let isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
        let isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
        let isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
        if(isIE) {
            let reIE = new RegExp("MSIE (\\d+\\.\\d+);");
            reIE.test(userAgent);
            let fIEVersion = parseFloat(RegExp["$1"]);
            if(fIEVersion == 7) {
                return 7;
            } else if(fIEVersion == 8) {
                return 8;
            } else if(fIEVersion == 9) {
                return 9;
            } else if(fIEVersion == 10) {
                return 10;
            } else {
                return 6;//IE版本<=7
            }
        } else if(isEdge) {
            return 'edge';//edge
        } else if(isIE11) {
            return 11; //IE11
        }else{
            return -1;//不是ie浏览器
        }
    }

    if (IEVersion() != -1) {
        $("[name='pdfContainer']").remove();
        $.modal.msgWarning("IE浏览器暂不支持在线预览PDF文件，建议使用Chrome浏览器");
    }

    function showFiles(fileName, oriFileName, filePath) {
        // 弹窗预览文件
        // 根据fileName判断文件类型，初始化不同的预览插件进行文件的预览
        // 经过查看RuoYi文档，及源码。选定使用layer的原生实现
        var fileNameArr = fileName.split('.');
        var suffixLowercase = fileNameArr[fileNameArr.length-1].toLowerCase();
        var imageTypes = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
        var pdfTypes = ['pdf'];
        // 如果是图片
        if(imageTypes.indexOf(suffixLowercase) > -1) {
            layer.open({
                type: 1,
                title: [
                    '图片预览',
                    'background-color: #CCCCCC; color:#000000;margin:0;text-align: left;'
                ],
                anim: 'up',
                area: ['70%', '650px'], //宽高
                content: '<img src="" style="max-width: 100%;clear: both;display: block;margin: auto" id="imgElement" />',
                success: function (elem) {
                    $(elem).find('#imgElement').attr('src', filePath);
                }
            });
        }
        // 如果是pdf
        else if(pdfTypes.indexOf(suffixLowercase) > -1) {
            if(IEVersion() != -1) {
                $.modal.msgWarning("IE浏览器暂不支持在线预览PDF文件，建议使用Chrome浏览器");
                return;
            }
            layer.open({
                type: 1,
                title: [
                    'PDF预览',
                    'background-color: #CCCCCC; color:#000000;margin:0;text-align: left;'
                ],
                anim: 'up',
                area: ['70%', '650px'], //宽高
                content: '<iframe src="" width="100%" height="100%" style="border: none;width:100%;height:100%;" id="pdfContainer"></iframe>',
                success: function (elem) {
                    var pdfmodule = '/js/plugins/pdfjs-2.7.570-es5-dist/web/viewer.html';
                    $(elem).find('#pdfContainer').attr('src', pdfmodule+'?file='+filePath);
                }
            });
        }
            // 其他，后续可以支持，比如视频、音乐
        // TODO 封装方法
        else {
            $.modal.msgError(suffixLowercase + " 类型暂不支持预览，请点击下载按钮进行预览");
        }

    }
</script>
</html>